<template>
  <view class="detail-view">
    <u-form label-width="160" :model="add_form" ref="uForm">
      <view class="form-model-view">
        <u-form-item required label="报损仓库" prop="warehouseName">
          <u-input
            @click="goPage('/pagesT/werahouse/selWerahouse')"
            class="dis-input"
            disabled
            v-model="add_form.warehouseName"
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
      </view>
      <view class="form-model-view">
        <u-form-item required label="商品清单">
          <view @click="selGoodsPage" class="form-value add-btn-go">
            <u-icon name="plus" size="24" color="#fb5904"></u-icon>
            <text class="form-value add-text">选择商品</text>
          </view>
        </u-form-item>
        <view class="goods-ul" v-if="goods_list.length">
          <block v-for="(item, index) in goods_list" :key="index">
            <view class="goods-li clearfix">
              <view class="goods-img float_left" @click="delGoods(item, index)"
                ><u-icon
                  size="40"
                  name="minus-circle-fill"
                  color="#fb5904"
                ></u-icon
              ></view>
              <view class="float_left info">
                <view class="goods-name ellipsis">{{ item.materielName }}</view>
                <view class="goods-code">{{ item.materielCode }}</view>
                <view class="goods-num clearfix">
                  <view class="float_left"
                    >{{ item.unitName }};{{ item.skuName }}</view
                  >
                  <view class="float_right"
                    >账目库存: {{ $utils.formatNub(item.inventoryNum) }}</view
                  >
                </view>
                <view class="num-ul">
                  <view class="num-li">
                    <view class="label">当前成本</view>
                    <input type="digit" disabled v-model="item.lossAmount" />
                  </view>
                  <view class="num-li">
                    <view class="label">报损数量</view>
                    <input
                      type="digit"
                      placeholder="请输入"
                      v-model="item.num"
                    />
                  </view>
                  <view class="num-li" v-if="item.isEq === 5">
                    <view class="label">其他单位</view>
                    <input
                      type="digit"
                      placeholder="请输入"
                      v-model="item.otherNum"
                    />
                  </view>
                  <view class="num-li">
                    <view class="label">报损金额</view>
                    <input
                      type="digit"
                      disabled
                      :value="
                        $utils.formatNub($NP.times(item.lossAmount, item.num))
                      "
                    />
                  </view>
                  <view class="num-li" v-if="enableLocationManagement === 5">
                    <view class="label">库区库位</view>
                    <input
                      @click="openLocation(index, item)"
                      disabled
                      type="text"
                      placeholder="请选择"
                      :value="
                        item.storageLocationName
                          ? item.areaName + '-' + item.storageLocationName
                          : ''
                      "
                    />
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>
      <view class="form-model-view">
        <u-form-item label="备注" label-position="top"
          ><u-input type="textarea" v-model="add_form.remark"
        /></u-form-item>
      </view>
    </u-form>
    <view class="detail-bottom"
      ><u-button
        class="handel-btn"
        @click="submit"
        :loading="sub_load"
        :ripple="true"
        type="primary"
        >提交</u-button
      ></view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        warehouseName: [
          {
            required: true,
            message: "请选择所属仓库",
            trigger: ["change", "blur"],
          },
        ],
      },
      werahouseData: "",
      warehouseGoods: "",
      add_form: {
        warehouseName: "",
        warehouseId: "",
        operatorName: "",
        remark: "",
      },
      goods_list: [],
      sub_load: false,
      goods_index: 0,
      areaBysku: "",
    };
  },
  computed: {
    userName() {
      return this.$store.state.userInfo.name;
    },
    enableLocationManagement() {
      return parseInt(this.$store.state.basicSet.enableLocationManagement);
    },
  },
  watch: {
    werahouseData(val) {
      if (val) {
        this.add_form.warehouseId = val.id;
        this.add_form.warehouseName = val.warehouseName;
        this.goods_list = [];
      }
    },
    // 选择商品页面返回
    warehouseGoods(list) {
      if (list) {
        this.selGoods(list);
      }
    },
    areaBysku(val) {
      if (val) {
        const target = this.$u.deepClone(this.goods_list);
        target[this.goods_index] = {
          ...target[this.goods_index],
          areaId: val.areaId,
          areaName: val.areaName,
          areaCode: val.areaCode,
          storageLocationId: val.storageLocationId,
          storageLocationName: val.storageLocationName,
          storageLocationCode: val.storageLocationCode,
        };
        this.goods_list = target;
      }
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad(options) {},
  methods: {
    // 去选择库区库位页面
    openLocation(index, row) {
      this.goods_index = index;
      this.goPage(
        `/pagesT/stock/WarehouseRegionBySku?basicGoodsId=${row.materielId}&skuId=${row.skuId}&warehouseId=${this.add_form.warehouseId}`
      );
    },
    delGoods(row, index) {
      this.goods_list.splice(index, 1);
    },
    selGoodsPage() {
      if (!this.add_form.warehouseId) {
        this.$u.toast("请选择仓库");
        return;
      }
      uni.setStorageSync("warehouseGoods", this.goods_list);
      this.goPage(
        "/pagesT/goods/GoodsbyWarehouse?id=" + this.add_form.warehouseId
      );
    },

    // 多选商品确定
    selGoods(list) {
      this.goods_list = list.map((item) => {
        return {
          isEq: item.isEq,
          otherNum: "",
          materielId: item.materielId,
          materielCode: item.materielCode,
          materielName: item.materielName,
          warehouseName: this.add_form.warehouseName,
          skuName: item.skuName,
          skuId: item.skuId,
          unitName: item.unitName,
          inventoryNum: Number(item.inventoryNum),
          lossAmount: Number(item.costPrice),
          num: item.buyNum,
          areaId: "",
          areaName: "",
          areaCode: "",
          storageLocationName: "",
          storageLocationId: "",
          storageLocationCode: "",
        };
      });
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (!this.goods_list.length) {
            this.$u.toast("请选择商品");
            return;
          }
          const isbuyerNum = this.goods_list.every((item) => item.num > 0);
          if (!isbuyerNum) {
            this.$u.toast("报损数量必须大于0");
            return;
          }
          let goodsData = this.goods_list.map((item) => {
            let goods = {
              materielId: item.materielId,
              materielName: item.materielName,
              materielCode: item.materielCode,
              skuId: item.skuId,
              unitName: item.unitName,
              skuName: item.skuName,
              num: item.num,
              inventoryNum: item.inventoryNum,
              lossAmount: item.lossAmount,
              otherNum: item.otherNum,
              areaId: item.areaId,
              areaName: item.areaName,
              areaCode: item.areaCode,
              storageLocationName: item.storageLocationName,
              storageLocationId: item.storageLocationId,
              storageLocationCode: item.storageLocationCode,
            };
            return goods;
          });
          const params = {
            warehouseId: this.add_form.warehouseId,
            warehouseName: this.add_form.warehouseName,
            remark: this.add_form.remark,
            operatorName: this.userName,
            details: goodsData,
          };
          this.sub_load = true;
          this.$u.api
            .addReportLoss(params)
            .then((res) => {
              this.sub_load = false;
              this.$u.toast("新建成功");
              setTimeout(() => {
                uni.navigateBack();
              }, 2000);
            })
            .catch((err) => {
              this.sub_load = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-ul {
  padding-bottom: 20rpx;
  .goods-title {
    margin-bottom: 20rpx;
    line-height: 80rpx;
    font-size: 24rpx;
    border-bottom: 1px solid #eeeeee;

    .float_right {
      color: $uni-color-primary;
    }
  }

  .goods-li {
    line-height: 32rpx;
    margin-top: 20rpx;

    .goods-img {
      margin-right: 20rpx;
      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 8rpx;
        display: block;
      }
    }

    .info {
      width: 640rpx;
      .num-ul {
        display: flex;
        padding-top: 20rpx;
        .num-li {
          font-size: 24rpx;
          line-height: 36rpx;
          flex: 3;
          text-align: center;
          position: relative;
          font-weight: bold;
          padding: 0 16rpx;
          .label {
            font-weight: 400;
            color: #999999;
          }
          input {
            text-align: center;
            border-bottom: 1px solid $uni-color-primary;
            &.input-dis {
              border-bottom: 1px solid #eeeeee;
            }
          }
          &::after {
            display: block;
            content: "";
            position: absolute;
            width: 1px;
            height: 60rpx;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            background-color: #eeeeee;
          }
          &:last-child {
            &::after {
              display: block;
              content: "";
              position: absolute;
              width: 1px;
              height: 50rpx;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              background-color: transparent;
            }
          }
        }
      }
      .goods-name {
        width: 640rpx;
        height: 34rpx;
        line-height: 34rpx;
      }

      .goods-code {
        font-size: 24rpx;
        padding-top: 10rpx;
      }

      .goods-num {
        padding-top: 10rpx;
        font-size: 24rpx;

        .price {
          font-size: 28rpx;
          font-weight: bold;
          color: $uni-color-error;
        }
      }
    }
  }
}
.form-value {
  .add-text {
    color: #fb5904;
  }
}
.handel-btn {
  background-color: #fb5904 !important;
  border-color: #fb5904 !important;
}
</style>
